
	panel.ui = {};

	/**
	 * UI
	**/			
	panel.ui.alert = {};
	panel.ui.alert.validation_failed = function(msg) {
		
		if( typeof(msg) == "object" ) {
			throw msg; }
		
		Ext.MessageBox.show({
		
			title   : "Validation alert:",		
			msg     : msg.toString().replace("\n", "<br>"),							
			buttons : Ext.MessageBox.OK,
			icon    : Ext.MessageBox.WARNING
				
		});
		
	};
	
	panel.ui.alert.alert = function(msg) {
	
		if( typeof(msg) == "object" ) {
			throw msg; }
	
		Ext.MessageBox.show({
				
			title   : "Alert:",
			
			msg     : [
				"<div class='w_max h_300' style='overflow-y: scroll;'>",
				msg.toString().replace("\n", "<br>"),
				"</div>"
			].join(""),
			
			width   : 500,
										
			buttons : Ext.MessageBox.OK,
			icon    : Ext.MessageBox.WARNING
				
		});
		
	};
	
	panel.ui.alert.info = function(msg) {
		
		Ext.MessageBox.show({
				
			title   : "Info:", 
			msg     : msg.replace("\n", "<br>"),							
			buttons : Ext.MessageBox.OK,
			icon    : Ext.MessageBox.INFO			
				
		});
		
	};
	
	panel.ui.alert.no_permissions = function() {
		
		Ext.MessageBox.show({
				
			title   : "Access denied:", 
			msg     : "<font class='c_red s_bold fnt_size_main'>You have no permissions to do this action.</font>",							
			buttons : Ext.MessageBox.OK,
			icon    : Ext.MessageBox.WARNING	
				
		});
		
	};
	
	panel.ui.alert.panel_is_locked = function() {
		
		Ext.MessageBox.show({
				
			title   : "Access denied:", 
			msg     : "<font class='c_red s_bold fnt_size_main'>Panel is locked, please try again after few minutes.</font>",							
			buttons : Ext.MessageBox.OK,
			icon    : Ext.MessageBox.WARNING
				
		});
		
	};
	
	panel.ui.alert.operation_completed_successfully = function(callback) {
	
		var config = {
	
			title   : "Info:",		
			msg     : "<font class='c_green s_bold fnt_size_main'>Operation completed successfully!</font>",							
			buttons : Ext.MessageBox.OK,
			icon    : Ext.MessageBox.INFO,
			width   : 300,
			closable: false
				
		};
		
		if( callback instanceof Function ) {
			config.fn = callback; }
	
		Ext.MessageBox.show(config);
		
	}
		
	panel.ui.highlight = {
		
		remove: function(node, cls) {
			
			var h = Ext.DomQuery.select("span." + cls, node);
			
		    for (var i = 0; i < h.length; i++) {
		        
				var s = h[i], sp = s.parentNode;
		        sp.replaceChild(document.createTextNode(s.firstChild.data), s);
		        sp.normalize();
				
		    }
			
		},
			
		apply: function(node, regexp, cls, deep) {
			
			if( typeof(regexp) == 'string' ) {
				
				if( !regexp.length ) {
					return; }
				
				regexp = new RegExp( RegExp.escape(regexp), "gi");
				
			} else if (!regexp.global) {
			 	
				throw "RegExp to highlight must use the global qualifier"; 
				
			}
			
			var value, df, m, l, start = 0, highlightSpan;
			
			//  Note: You must add the trim function to the String's prototype
			if ((node.nodeType == 3) && (value = node.data.trim())) {
			
				// Loop through creating a document DocumentFragment containing text nodes interspersed with
				// <span class={cls}> elements wrapping the matched text.
				while( m = regexp.exec(value) ) {
					
					if (!df) {
						df = document.createDocumentFragment();
					}
					
					if (l = m.index - start) {
						df.appendChild(document.createTextNode(value.substr(start, l)));
					}
					
					highlightSpan = document.createElement('span');
					highlightSpan.className = cls;
					highlightSpan.appendChild(document.createTextNode(m[0]));
					df.appendChild(highlightSpan);
					start = m.index + m[0].length;
					
				}
				
				// If there is a resulting DocumentFragment, replace the original text node with the fragment
				if (df) {
					
					if (l = value.length - start) {
						df.appendChild(document.createTextNode(value.substr(start, l)));
					}
					
					node.parentNode.replaceChild(df, node);
					
				}
				
			} else {
				
				if (deep) {
					
					Ext.each(node.childNodes, function(child) {
						panel.ui.highlight.apply(child, regexp, cls, deep);
					});
					
				}
				
			}
			
		}
		
	};
		